
<template>
  <a-table :columns="columns" :dataSource="data" :pagination="false" :custom-row="customRow">
    <template #bodyCell="{ column, text, record, index }">
      <template v-if="column.key === 'serial'">
        {{ index + 1 }}
      </template>
      <template v-else>
        {{ text }}
      </template>
    </template>
  </a-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { Table } from 'ant-design-vue'; 
const result =ref()
    //单击选择
    /* 自定义行属性 */
        const customRow = (record) => {
        return {
            
            onClick: (e) => {
                // 移除
                if(document.querySelector('.tableRefHover')){
                    document.querySelector('.tableRefHover').classList.remove('tableRefHover');
                }
                // 添加
                e.target.parentNode.classList.add('tableRefHover');
               result.value = record;
               console.log(record)

            }
        };
    };
const columns = ref([
  {
    title: '顺序',
    key: 'serial',
    width: 80,
  },
  {
    title: '列名称',
    dataIndex: 'name',
    key: 'name',
     ellipsis: true,
  },
  {
    title: '宽度',
    dataIndex: 'age',
    key: 'age',
  },
  // ... 其他列
]);
 
const data = ref([
  {
    key: '1',
    name: 'John Brown',
    age: 32, 
  }, 
   {
    key: '1',
    name: 'John Brown',
    age: 32, 
  }, 
   {
    key: '1',
    name: 'John Brown',
    age: 32, 
  }, 
]);
</script>
<style lang="scss" scope>
  .tableRefHover{
    background-color: #e6f8fa;
  }
</style>

 